<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>小米商城</title>
		<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css"/>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			.divshang {
				height: 40px;
				width: 1435.2px;
				background-color: rgb(51, 51, 51);
				list-style-type: none;
			}
			
			.divshang .divzuo {
				float: left;
				height: 40px;
				width: 185px;
			}
			
			.divshang .divyou {
				float: left;
				height: 40px;
				width: 1250.2px;
			}
			
			.divshang .divyou li {
				float: left;
				height: 40px;
				text-align: center;
				/*line height是行高，height 是高 lineheight和高一样文字就会
				 垂直居中*/
				line-height: 40px;
				color: rgb(176, 176, 148);
				margin-left: 15px;
				font-size: 14px;
			}
			
			.divshang .divyou .changeli {
				float: right;
				height: 40px;
				text-align: center;
				/*line height是行高，height 是高 lineheight和高一样文字就会
				 垂直居中*/
				line-height: 40px;
				color: rgb(176, 176, 148);
				margin-left: 15px;
				font-size: 14px;
			}
			
			.divshang li a:link,
			.divshang li a:visited {
				/*去掉下划线*/
				text-decoration: none;
				color: rgb(176, 176, 148);
			}
			
			.divshang li a:hover {
				color: white;
			}
			
			.midwhite {
				list-style-type: none;
				margin: 0 auto;
				width: 1226px;
				height: 100px;
			}
			
			.midwhite .div2zuo {
				float: left;
				height: 100px;
				width: 290px;
			}
			
			.div2zuo img {
				height: 55px;
				width: 55px;
				margin: 15px auto;
			}
			
			.midwhite .div2zhong {
				float: left;
				height: 100px;
				width: 936px;
			}
			
			.midwhite .div2zhong li {
				float: left;
				height: 40px;
				/*line height是行高，height 是高 lineheight和高一样文字就会
				 垂直居中*/
				line-height: 40px;
				color: black;
				padding: 26px 10px 38px;
				font-size: 17.6px;
			}
			
			.midwhite .div2zhong li a:link,
			.midwhite .div2zhong li a:visited {
				color: black;
				text-decoration: none;
			}
			
			.midwhite .div2zhong li a:hover {
				color: orange;
			}
			
			.midbig {
				
				height: 460px;
				width: 1226px;
				list-style-type: none;
				margin: 0 auto;
			}
			
			.midbig .midbigzuo {
				float: left;
				height: 460px;
				width: 234PX;
				background-color: rgb(100, 99, 102);
			}
			.midbig .midbigzuo ul{
				list-style-type: none;
				margin: 20px auto;
				height: 460px;
				width: 234PX;
				
			}
			.midbig .midbigzuo li a:link,
			.midbig .midbigzuo li a:visited {
				/*去掉下划线*/
				text-decoration: none;
				color: white;
			}
			
			
			.midbig .midbigzuo li:hover{
				background-color:rgb(255,103,0);
				color: rgb(255,103,0);
			}
			.midbig .midbigyou {
				float: left;
				height: 460px;
				width: 992PX;
			}
			
			.midbig .midbigzuo ul li {
				height: 42px;
				line-height: 40px;
				width: 234px;
				color: white;
				padding: 0 0 0 20px;
				font-size: 14px;
				
			}
			.midbigyou img {
				height: 460px;
				width: 992px;
			}
			.end{
				width: 1240px;
				height: 170px;
				list-style-type: none;
				margin: 14px auto;
				margin: 14 0 0 -14px;
			}
			.end .div1{
				float: left;
				/*margin-left: 14px;*/
				height: 170px;
				width: 234px;
				background-color: rgb(95,87,80);
				padding: 3px;
			}
			.end .div1 ul{
				
				/*去掉ul中的小圆点*/
				list-style-type: none;
				
			}
			.end .div1 ul li{
				float: left;
				height: 82px;
				width: 70px;
				font-size: 12px;
				text-align: center;
			}
			.end .div1 ul li  p{
				font-size: 12px;
				text-align: center;
				
			}
			.end .div1 ul li img{
				margin:0 auto;
				height: 24px;
				width: 24px;
			}
			.end .div1 ul li a{
				display: block;
				width: 70px;
				height: 63.6px;
				margin-top: 18px;
			}
			.end .div1 li a:link,
			.end .div1 li a:visited {
				/*去掉下划线*/
				text-decoration: none;
				color: rgb(176, 176, 148);
			}
			.end .div1 li a:hover{
				color: white;
			}
			.end .div2{
				float: left;
				margin-left: 14px;
				height: 170px;
				width: 316px;
				}
				.end .div2 img{
				height: 170px;
				width: 316px;
				}
			.CJMSdiv{
				padding-top: 4px;
				padding-bottom: 12px;
				width: 1519.2px;
				height: 5800px;
				background-color: rgb(245,245,245);
			}
			.tatil{
				margin: 30px auto;
				width: 1226px;
				height: 57.6px;
			}	
			.tatil h2{
				padding: 20px 0;
				font-size: 22px;
			}
			.CJMSzong{
				margin: 0 auto;
				width: 1240px;
				height: 340px;
			}
			.CJMSzong .cjmspicture{
				margin-left: 14px;
				float: left;
				width: 234px;
				height: 339px;
			}
			.CJMSzong .cjmspicture img{
				width: 234px;
				height: 339px;
			}
			.datu{
				margin: 0 auto;
				width: 1220px;
				height: 120px;
			}
			.datu img{
				margin: 0 auto;
				width: 1220px;
				height: 120px;
			}
			.phone{
				margin: 0 auto;
				width: 1226px;
				height: 614px;
			}
			.phoneleft{
				float: left;
				width: 234px;
				height: 614px;
			}
			.phoneleft img{
				width: 234px;
				height: 614px;
			}
			.phoneright{
				float: left;
				width: 992px;
				height: 614px;
				}
			.phoneright .divkuai{
				float: left;
				margin: 0px 0px 14px 14px;
				height: 300px;
				width: 234px;
				
			}
			.phoneright .divkuai img{
				height: 300px;
				width: 234px;
				padding: 10px 0 10px 0;
			}
			.jiandian{
				margin: 0 auto;
				width: 1226px;
				height: 614px;
			}
			.jiadianleft{
				float: left;
				width: 234px;
				height: 300px;
			}
			.jiadianleft .jiadianleftkuai{
				float: left;
				margin: 0px 0px 14px 14px;
				height: 300px;
				width: 234px;
				}
			.jiadianleft .jiadianleftkuai img{
				width: 234px;
				height: 300px;
			 	padding: 10px 0 10px 0;
			}
			.jiadianright{
				float: left;
				width: 992px;
				height: 614px;
				}
			.jiadianright .jiadianrightkuai{
				float: left;
				margin: 0px 0px 14px 14px;
				height: 300px;
				width: 234px;
				
			}
			.jiadianright .jiadianrightkuai img{
				float: left;
				height: 300px;
				width: 234px;
				padding: 10px 0 10px 0;
			}
			.jiadianright .jiadianrightkuai .mod{
				margin: 0px 0px 14px 14px;
				height: 143px;
				width: 234px;
			}
			.jiadianright .jiadianrightkuai  .mod img{
				height: 143px;
				width: 234px;
			}
		</style>
	</head>

	<body>
		<div class="divshang">
			<div class="divzuo"></div>
			<div class="divyou">
				<li>
					<a href="https://www.mi.com/index.html">小米商城</a>
				</li>
				<li>
					<a href="https://www.miui.com/" target="_blank">MIUI</a>
				</li>
				<li>
					<a href="https://iot.mi.com/index.html" target="_blank">loT</a>
				</li>
				<li>
					<a href="https://i.mi.com/" target="_blank">云服务</a>
				</li>
				<li>
					<a href="https://jr.mi.com/index.html?from=micom&t=1565955236928" target="_blank">金融</a>
				</li>
				<li>
					<a href="https://www.xiaomiyoupin.com/" target="_blank">有品</a>
				</li>
				<li>
					<a href="https://xiaoai.mi.com" target="_blank">小爱开放平台</a>
				</li>
				<li>
					<a href="https://qiye.mi.com/" target="_blank">企业团购</a>
				</li>
				<li>
					<a href="https://www.mi.com/aptitude/list/?id=41" target="_blank">资历证照</a>
				</li>
				<li>
					<a href="https://www.mi.com/aptitude/list/?id=41" target="_blank">协议规则</a>
				</li>
				<li>
					<a href="https://www.mi.com/aptitude/list/?id=41" target="_blank">下载App</a>
				</li>
				<li>
					<a href="javascript:;" target="_blank">Select location</a>
				</li>
				<li style="margin-left: 20px; margin-right: 20px;" class="changeli"><span class="glyphicon glyphicon-shopping-cart " aria-hidden="true"></span> 购物车</li>
				<li class="changeli">
					<a href="javascript:void(0);:;" target="_blank">消息通知</a>
				</li>
				<li class="changeli">
					<a href="https://account.xiaomi.com" target="_blank">登录</a>
				</li>
				<li class="changeli">
					<a href="https://cn.account.xiaomi.com/pass/register" target="_blank">注册</a>
				</li>

			</div>
		</div>
		<div class="midwhite">
			<div class="div2zuo">
				<li><img src="js/123.jpg"/></li>
			</div>
			<div class="div2zhong">
				<li>
					<a href="###">小米手机</a></li>
				<li>
					<a href="###">Redmi红米</a></li>
				<li>
					<a href="###">电视</a></li>
				<li>
					<a href="###">笔记本</a></li>
				<li>
					<a href="###">家电</a></li>
				<li>
					<a href="###">路由器</a></li>
				<li>
					<a href="###">智能硬件</a></li>
				<li>
					<a href="###">服务</a></li>
				<li>
					<a href="###">社区</a></li>
				
				<li><input type="text" class="glyphicon-search" placeholder="小米9" style="margin-left: 20px;height: 40px;width: 150px;"></li>
				<li><button class="btn btn-default">搜索</button></li>
			</div>
		</div>
		<div class="midbig">
			<div class="midbigzuo">
				<ul>
					<li ><a href="###">手机 电话卡</a></li>
					<li><a href="###">电视 盒子</a></li>
					<li><a href="###">笔记本 平板</a></li>
					<li><a href="###">家电 插电板</a></li>
					<li><a href="###">出行 穿戴</a></li>
					<li><a href="###">智能 路由器</a></li>
					<li><a href="###">电源 配件</a></li>
					<li><a href="###">健康 儿童</a></li>
					<li><a href="###">耳机 音箱</a></li>
					<li><a href="###">生活 箱包</a></li>
				</ul>
			</div>
			<div class="midbigyou">
				<li><img src="js/234.jpg" /></li>
			</div>
		</div>
		<div class="end">
			<div class="div1">
				<ul>
				<li><a href="#"><img src="img/小米秒杀.png"><p>小米秒杀</p></a></li>
				<li><a href="#"><img src="img/企业团购.png"><p>企业团购</p></a></li>
				<li><a href="#"><img src="img/F码通道.png"><p>F码通道</p></a></li>
				<li><a href="#"><img src="img/米粉卡.png"><p>米粉卡</p></a></li>
				<li><a href="#"><img src="img/以旧换新.png"><p>以旧换新</p></a></li>
				<li><a href="#"><img src="img/话费充值.png"><p>话费充值</p></a></li>
				</ul>
			</div>
			<div class="div2">
				<a href="#"><img src="img/1.jpg"></a>
			</div>
			<div class="div2"><a href="#"><img src="img/2.jpg"></a></div>
			<div class="div2"><a href="#"><img src="img/3.jpg"></a></div>
			</div>
			<div class="CJMSdiv">
				<div class="tatil">
					<h2 class="tatil">小米闪购</h2>
				</div>
				<div class="CJMSzong">
					<div class="cjmspicture"><a href="#"><img src="JAVA0815/秒杀1.jpg"/></a></div>
					<div class="cjmspicture"><a href="#"><img src="JAVA0815/秒杀2.jpg"/></a></div>
					<div class="cjmspicture"><a href="#"><img src="JAVA0815/秒杀3.jpg"/></a></div>
					<div class="cjmspicture"><a href="#"><img src="JAVA0815/秒杀4.jpg"/></a></div>
					<div class="cjmspicture"><a href="#"><img src="JAVA0815/秒杀5.jpg"/></a></div>
				</div>
				<div class= "datu" ><a href="#"><img src ="JAVA0815/大图.png" style="margin-top: 20px;"/></a></div>
				<div class="tatil">
				<h2 class="tatil">手机</h2>
				</div>
				<div class="phone">
					<div class="phoneleft"><a href="#"><img src="JAVA0815/女人.png"/></a></div>
					<div class="phoneright">
						<div class="divkuai"><a href="#"><img src="JAVA0815/132.png"></a></div>
						<div class="divkuai"><a href="#"><img src="小米官网图片/1.png"></a></div>
						<div class="divkuai"><a href="#"><img src="小米官网图片/2.png"></a></div>
						<div class="divkuai"><a href="#"><img src="小米官网图片/3.png"></a></div>
						<div class="divkuai"><a href="#"><img src="小米官网图片/4.png"></a></div>
						<div class="divkuai"><a href="#"><img src="小米官网图片/5.png"></a></div>
						<div class="divkuai"><a href="#"><img src="小米官网图片/6.png"></a></div>
						<div class="divkuai"><a href="#"><img src="小米官网图片/7.png"></a></div>
					</div>
				</div>
				<div class= "datu" ><a href="#"><img src ="小米官网图片/8.png" style="margin-top: 40px;"/></a></div>
				<div class="tatil">
				<h2 class="tatil">家电</h2>
				</div>
				<div class="jiandian">
					<div class="jiadianleft">
						<div class="jiadianleftkuai"><a href="#"><img src="小米官网图片/9.png"></div>
						<div class="jiadianleftkuai"><a href="#"><img src="小米官网图片/14.png"></div>
					</div>
					
					<div class="jiadianright">
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/10.png"></a></div>
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/11.png"></a></div>
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/12.png"></a></div>
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/13.png"></a></div>
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/15.png"></a></div>
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/16.png"></a></div>
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/17.png"></a></div>
						<div class="jiadianrightkuai">
							<div class="mod"><a href="#"><img src="小米官网图片/18.png"></a></div>
							<div class="mod"><a href="#"><img src="小米官网图片/19.png"></a></div>
						</div>
					</div>
				</div>
				<div class= "datu" ><a href="#"><img src ="小米官网图片/20.png" style="margin-top: 40px;"/></a></div>
				<div class="tatil">
				<h2 class="tatil">智能</h2>
				</div>
				<div class="jiandian">
					<div class="jiadianleft">
						<div class="jiadianleftkuai"><a href="#"><img src="小米官网图片/9.png"></div>
						<div class="jiadianleftkuai"><a href="#"><img src="小米官网图片/14.png"></div>
					</div>
					
					<div class="jiadianright">
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/10.png"></a></div>
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/11.png"></a></div>
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/12.png"></a></div>
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/13.png"></a></div>
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/15.png"></a></div>
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/16.png"></a></div>
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/17.png"></a></div>
						<div class="jiadianrightkuai">
							<div class="mod"><a href="#"><img src="小米官网图片/18.png"></a></div>
							<div class="mod"><a href="#"><img src="小米官网图片/19.png"></a></div>
						</div>
					</div>
				</div>
				<div class= "datu" ><a href="#"><img src ="小米官网图片/20.png" style="margin-top: 40px;"/></a></div>
				<div class="tatil">
				<h2 class="tatil">搭配</h2>
				</div>
				<div class="jiandian">
					<div class="jiadianleft">
						<div class="jiadianleftkuai"><a href="#"><img src="小米官网图片/9.png"></div>
						<div class="jiadianleftkuai"><a href="#"><img src="小米官网图片/14.png"></div>
					</div>
					
					<div class="jiadianright">
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/10.png"></a></div>
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/11.png"></a></div>
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/12.png"></a></div>
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/13.png"></a></div>
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/15.png"></a></div>
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/16.png"></a></div>
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/17.png"></a></div>
						<div class="jiadianrightkuai">
							<div class="mod"><a href="#"><img src="小米官网图片/18.png"></a></div>
							<div class="mod"><a href="#"><img src="小米官网图片/19.png"></a></div>
						</div>
					</div>
				</div>
				<div class= "datu" ><a href="#"><img src ="小米官网图片/20.png" style="margin-top: 40px;"/></a></div>
				<div class="tatil">
				<h2 class="tatil">配件</h2>
				</div>
				<div class="jiandian">
					<div class="jiadianleft">
						<div class="jiadianleftkuai"><a href="#"><img src="小米官网图片/9.png"></div>
						<div class="jiadianleftkuai"><a href="#"><img src="小米官网图片/14.png"></div>
					</div>
					
					<div class="jiadianright">
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/10.png"></a></div>
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/11.png"></a></div>
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/12.png"></a></div>
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/13.png"></a></div>
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/15.png"></a></div>
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/16.png"></a></div>
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/17.png"></a></div>
						<div class="jiadianrightkuai">
							<div class="mod"><a href="#"><img src="小米官网图片/18.png"></a></div>
							<div class="mod"><a href="#"><img src="小米官网图片/19.png"></a></div>
						</div>
					</div>
				</div>
				<div class= "datu" ><a href="#"><img src ="小米官网图片/20.png" style="margin-top: 40px;"/></a></div>
				<div class="tatil">
				<h2 class="tatil">周边</h2>
				</div>
				<div class="jiandian">
					<div class="jiadianleft">
						<div class="jiadianleftkuai"><a href="#"><img src="小米官网图片/9.png"></div>
						<div class="jiadianleftkuai"><a href="#"><img src="小米官网图片/14.png"></div>
					</div>
					
					<div class="jiadianright">
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/10.png"></a></div>
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/11.png"></a></div>
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/12.png"></a></div>
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/13.png"></a></div>
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/15.png"></a></div>
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/16.png"></a></div>
						<div class="jiadianrightkuai"><a href="#"><img src="小米官网图片/17.png"></a></div>
						<div class="jiadianrightkuai">
							<div class="mod"><a href="#"><img src="小米官网图片/18.png"></a></div>
							<div class="mod"><a href="#"><img src="小米官网图片/19.png"></a></div>
						</div>
					</div>
				</div>
				<div class= "datu" ><a href="#"><img src ="小米官网图片/20.png" style="margin-top: 40px;"/></a></div>
				</div>
				<div style="width: 1226px; height: 510px; margin: 0 auto;"><img src="小米官网图片/21.png" style="width: 1226px; height: 510px; margin: 0 auto;"></div>
			
	</body>

</html>